<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="vue.js"></script>
    <script src="mock.js"></script>
    <script src="jquery-1.8.3.min.js"></script>
    <link href="mycss.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="iconfont.css">
    <link rel="stylesheet" href="display.css">
    <link href="nav.css" type="text/css" rel="stylesheet">
    <link href="bottom.css" type="text/css" rel="stylesheet">
    <script src="myjs.js"></script>
    <title>商品信息</title>
</head>


<body>
    <div id="app">

<div style="z-index: 100;">
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="sdaohang" style="z-index:99999 ;">
        <li class="nav-item pl-5 mb-4">
            <a class="nav-link active" href="https://www.nike.com/cn/jordan">
                <svg height="24px" width="24px" fill="#111" viewBox="0 0 26 32">
                    <path
                        d="M14.4 5.52v-.08q0-.56.36-1t.92-.44 1 .36.48.96-.36 1-.96.4l-.24.08.08.12-.08.44-.16 1.28q.08.08.08.16l-.16.8q-.08.16-.16.24l-.08.32q-.16.64-.28 1.04t-.2.64V12q-.08.4-.12.64t-.28.8q-.16.32 0 1.04l.08.08q0 .24.2.56t.2.56q.08 1.6-.24 2.72l.16.48q.96.48.56 1.04l.4.16q.96.48 1.36.84t.8.76q.32.08.48.24l.24.08q1.68 1.12 3.36 2.72l.32.24v.08l-.08.16.24.16h.08q.24.16.32.16h.08q.08 0 .16-.08l.16-.08q.16-.16.32-.24h.32q.08 0 0 .08l-.32.16-.4.48h.56l.56.08q.24-.08.4-.16l.4-.24q.24-.08.48.16h.08q.08.08-.08.24l-.96.88q-.4.32-.72.4l-1.04.72q-.08.08-.16 0l-.24-.32-.16-.32-.2-.28-.24-.32-.2-.24-.16-.2-.32-.24q-.16 0-.32-.08l-1.04-.8q-.24 0-.56-.24-1.2-1.04-1.6-1.28l-.48-.32-.96-.16q-.48-.08-1.28-.48l-.64-.32q-.64-.32-.88-.32l-.32-.16q-.32-.08-.48-.16l-.16-.16q-.16 0-.32.08l-1.6.8-2 .88q-.8.64-1.52 1.04l-.88.4-1.36.96q-.16.16-.32 0l-.16.16q-.24.08-.32.08l-.32.16v.16h-.16l-.16.24q-.16.32-.32.36t-.2.12-.08.12l-.16.16-.24.16-.36-.04-.48.08-.32.08q-.4.08-.64-.12t-.4-.6q-.16-.24.16-.4l.08-.08q.08-.08.24-.08h.48L1.6 26l.32-.08q0-.16.08-.24.08-.08.24-.08v-.08q-.08-.16-.08-.32-.08-.16-.04-.24t.08-.08h.04l.08.24q.08.4.24.24l.08-.16q.08-.16.24-.16l.16.16.16-.16-.08-.08q0-.08.08-.08l.32-.32q.4-.48.96-.88 1.12-.88 2.4-1.36.4-.4.88-.4.32-.56.96-1.2.56-.4.8-.56.16-.32.4-.32H10l.16-.16q.16-.08.24-.16v-.4q0-.4.08-.64t.4-.24l.32-.32q-.16-.32-.16-.72h-.08q-.16-.24-.16-.48-.24-.4-.32-.64h-.24q-.08.24-.4.32l-.08.16q-.32.56-.56.84t-.88.68q-.4.4-.56.88-.08.24 0 .48l-.08.16h.08q0 .16.08.16h.08q.16.08.16.2t-.24.08-.36-.16-.2-.12l-.24.24q-.16.24-.32.2t-.08-.12l.08-.08q.08-.16 0-.16l-.64.16q-.08.08-.2 0t.04-.16l.4-.16q0-.08-.08-.08-.32.16-.64.08l-.4-.08-.08-.08q0-.08.08-.08.32.08.8-.08l.56-.24.64-.72.08-.16q.32-.64.68-1.16t.76-.84l.08-.32q.16-.32.32-.56t.4-.64l.24-.32q.32-.48.72-.48l.24-.24q.08-.08.08-.24l.16-.16-.08-.08q-.48-.4-.48-.72-.08-.56.36-.96t.88-.36.68.28l.16.16q.08 0 .08.08l.32.16v.24q.16.16.16.24.16-.24.48-.56l.4-1.28q0-.32.16-.64l.16-.24v-.16l.24-.96h.16l.24-.96q.08-.24 0-.56l-.32-.8z">
                    </path>
                </svg>
            </a>
        </li>
        <li class="nav-item mb-4">
            <a class="nav-link active" href="https://www.converse.com.cn/">
                <svg height="24px" width="24px" fill="#111" viewBox="0 0 39 33">
                    <path
                        d="M10.94 25.626l-4.236-5.501L.201 22.28l3.734-5.756L.11 10.777l6.59 2.031 4.026-5.474.14 6.785 6.64 2.175-6.594 2.446.028 6.886zm.824 7.239l13.952-16.393L11.806.107h11.697l14.871 16.389-14.8 16.369h-11.81z">
                    </path>
                </svg>
            </a>
        </li>
        <li class="nav-item dropdown ml-auto mb-2 " id="srdaohang">
            <a class="nav-link text-secondary" href="#" id="bangzhu" role="button" data-toggle="dropdown"
                data-haspopup="true" aria-expanded="true" style="font-size: small;">帮助</a>
            <div class="dropdown-menu" aria-labelledby="bangzhu" id="bzxiala">
                <a class="dropdown-item" style="padding-bottom:12px;">帮助</a>
                <a class="dropdown-item" v-for="item in help" style="font-size: 14px;color: #888;">{{item}}</a>
            </div>
        </li>
        <span class="pre-help-separator ">|</span>
        <li class="nav-item dropdown mb-4">
            <a class="nav-link text-secondary" href="#" id="zhanghu" role="button" data-toggle="dropdown"
                data-haspopup="true" aria-expanded="true" style="font-size: small;">您好
                <svg class="icon-btn ripple rounded-circle icon-secondary" aria-hidden="true" data-var="glyph"
                    fill="#111" height="30px" width="30px" viewBox="0 0 24 24" role="button" data-toggle="dropdown"
                    id="zhanghuT">
                    <path
                        d="M16.44 11A5.94 5.94 0 0 0 18 7 6 6 0 0 0 6 7a5.94 5.94 0 0 0 1.56 4A5 5 0 0 0 3 16v5a1 1 0 0 0 2 0v-5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v5a1 1 0 0 0 2 0v-5a5 5 0 0 0-4.56-5zM8 7a4 4 0 1 1 4 4 4 4 0 0 1-4-4z">
                    </path>
                </svg>
            </a>
            <div class="dropdown-menu" aria-labelledby="zhanghu" id="zhxiala">
                <a class="dropdown-item" style="padding-bottom: 12px;">账户</a>
                <a class="dropdown-item" v-for="item in zhanghu" style="font-size: 14px;color: #888;">{{item}}</a>
            </div>
        </li>
    </nav>
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top " id="xdaohang">
        <!-- 耐克图标 -->
        <li class="nav-item pl-5 mb-4" id="nikeT">
            <a class="d-sm-b prl2-sm prl3-lg" href="https://www.nike.com/cn/">
                <svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32">
                    <path
                        d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z">
                    </path>
                </svg>
            </a>
        </li>

        <ul id="nav2">
            <li  @mouseleave="hid()">
              <a href="#"  @mouseenter="show()">新品尝鲜</a>
              <!-- 下拉框 -->
              <div class="down" v-show="flagdown">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
             </div>
            </li>
            <li  @mouseleave="hid2()">
              <a href="#" @mouseenter="show2()">男子</a>
              <!-- 下拉框 -->
              <div class="down" v-show="flagdown2">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown1">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
            </li>
            <li  @mouseleave="hid3()">
              <a href="#" @mouseenter="show3()">女子</a>
              <!-- 下拉框 -->
              <div class="down" v-show="flagdown3">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown1">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
            </li>
            <li  @mouseleave="hid4()">
                <a href="#" @mouseenter="show4()">儿童</a>
                <!-- 下拉框 -->
              <div class="down" v-show="flagdown4">
                <div style="margin-left: 140px;">
                <ul v-for="item in arrdown2">{{item.name}}
                    <li v-for="items in item.aa">{{items}}</li>
                </ul>
               </div>
              </li>
            <li>
                <a href="#" >专属定制</a>
            </li>
          </ul>
        <!-- 搜索框 -->
        <li class="search1" style="height: 20px;" >
            <form method="get" id="search2">
                <fieldset class="search" >
                    <button class="btn rounded-circle" id="searchb">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bibi-search" viewBox="0 0 16 16">
                            <path
                                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z">
                            </path>
                        </svg>
                    </button>
                    <input type="text" class="box inputText" id="searcht" placeholder="搜索" />
                </fieldset>
            </form>
        </li>
        <!-- 收藏 -->
        <li class="heart">
            <a href="../收藏.html" style="color:#000">
            <div class=" rounded-circle" id="heart">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-heart"
                    viewBox="0 0 16 16">
                    <path
                        d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z" />
                </svg>
            </div>
        </a>
        </li>
        <!-- 购物车 -->
        <li class="buy">
            <a href="../nike_shoppingcar.html" style="color:#000">
            <div class=" rounded-circle" id="buy">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                    class="bi bi-handbag" viewBox="0 0 16 16"> 
                    <path
                        d="M8 1a2 2 0 0 1 2 2v2H6V3a2 2 0 0 1 2-2zm3 4V3a3 3 0 1 0-6 0v2H3.36a1.5 1.5 0 0 0-1.483 1.277L.85 13.13A2.5 2.5 0 0 0 3.322 16h9.355a2.5 2.5 0 0 0 2.473-2.87l-1.028-6.853A1.5 1.5 0 0 0 12.64 5H11zm-1 1v1.5a.5.5 0 0 0 1 0V6h1.639a.5.5 0 0 1 .494.426l1.028 6.851A1.5 1.5 0 0 1 12.678 15H3.322a1.5 1.5 0 0 1-1.483-1.723l1.028-6.851A.5.5 0 0 1 3.36 6H5v1.5a.5.5 0 1 0 1 0V6h4z" > 
                </svg>
            </div>
        </a>
        </li>
    </nav>
</div>



        
        <div class="wall-header-offset  my-2"></div>
            <div style="width: 100%;" height="200px" >aaa</div>
        <nav class="navbar  navbar-expand navbar-light bg-primary   " id="mydaohang2" style="position: fixed;top:85px;z-index: 1; ">

            <a class="navbar-brand ml-4 " href="#" id="bian" style="font-size: 18px;">
                拖鞋和凉鞋(20)
            </a>

            <button class="navbar-toggler  " type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" >
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse my-0" id="navbarSupportedContent">



            </div>
            <form class="form-inline  mb-3 "   >
                <ul class="navbar-nav mr-5">

                    <!-- 导航块列表 -->
                    <li class="nav-item1 active ">
                        <a class="nav-link">
                            <div class="yincang" @click="yincangz()">{{textz}}

                                <svg aria-hidden="true" class="icon-filter-ds" focusable="false" viewBox="0 0 24 24"
                                    role="img" width="24px" height="24px" fill="none">

                                    <path stroke="currentColor" stroke-width="1.5" d="M21 8.25H10m-5.25 0H3"></path>
                                    <path stroke="currentColor" stroke-width="1.5"
                                        d="M7.5 6v0a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z" clip-rule="evenodd">
                                    </path>
                                    <path stroke="currentColor" stroke-width="1.5" d="M3 15.75h10.75m5 0H21"></path>
                                    <path stroke="currentColor" stroke-width="1.5"
                                        d="M16.5 13.5v0a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z" clip-rule="evenodd">
                                    </path>
                                </svg><span class="sr-only">(current)</span>
                            </div>

                        </a>

                    </li>
                    <li class="nav-item dropdown">
                        <div class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            排序依据<a v-bind:innertext="paixuzhi" id="pxz" class="mx-1">{{paixuzhi}}</a>
                        </div>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown" @click="paixu($event)">
                            <a class="dropdown-item" href="#">推荐</a>
                            <a class="dropdown-item" href="#">最新</a>
                            <a class="dropdown-item" href="#">价格：从高到低</a>
                            <a class="dropdown-item" href="#">价格：从低到高</a>

                        </div>
                    </li>



                </ul>
            </form>
        </nav>


        <header class="wall-header mt-0 mb-4"  style="z-index: 0; ">
            <div class="wall-breadcrumbs mb-0" style="z-index: 0;">


                <ul class="wall-breadcrumbs__list mr-3">

                    <a class="css-hrsjq4 is--link " href="" data-ndx="0">鞋类</a>
                    <span class="wall-breadcrumbs__separator">/</span>
                    <a class="css-hrsjq4 is--link" href="" data-ndx="1">凉鞋/拖鞋</a></li>
                    <span class="wall-breadcrumbs__separator">/</span>
                    <a class="css-hrsjq4 is--link " href="" data-ndx="0">鞋类</a>


                </ul>
            </div>
            <nav class="navbar  navbar-expand navbar-light bg-primary   " id="mydaohang">

                <a class="navbar-brand ml-4 " href="#">
                    拖鞋和凉鞋(20)
                </a>

                <button class="navbar-toggler  " type="button" data-toggle="collapse"
                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse my-0" id="navbarSupportedContent">



                </div>
                <form class="form-inline my-2 my-lg-0">
                    <ul class="navbar-nav mr-5">

                        <!-- 导航块列表 -->
                        <li class="nav-item1 active ">
                            <a class="nav-link">
                                <div class="yincang" @click="yincangz()">{{textz}}

                                    <svg aria-hidden="true" class="icon-filter-ds" focusable="false" viewBox="0 0 24 24"
                                        role="img" width="24px" height="24px" fill="none">

                                        <path stroke="currentColor" stroke-width="1.5" d="M21 8.25H10m-5.25 0H3"></path>
                                        <path stroke="currentColor" stroke-width="1.5"
                                            d="M7.5 6v0a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z" clip-rule="evenodd">
                                        </path>
                                        <path stroke="currentColor" stroke-width="1.5" d="M3 15.75h10.75m5 0H21"></path>
                                        <path stroke="currentColor" stroke-width="1.5"
                                            d="M16.5 13.5v0a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z"
                                            clip-rule="evenodd">
                                        </path>
                                    </svg><span class="sr-only">(current)</span>
                                </div>

                            </a>

                        </li>
                        <li class="nav-item dropdown">
                            <div class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                排序依据<a v-bind:innertext="paixuzhi" id="pxz" class="mx-1">{{paixuzhi}}</a>
                            </div>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown" @click="paixu($event)">
                                <a class="dropdown-item" href="#">推荐</a>
                                <a class="dropdown-item" href="#">最新</a>
                                <a class="dropdown-item" href="#">价格：从高到低</a>
                                <a class="dropdown-item" href="#">价格：从低到高</a>

                            </div>
                        </li>



                    </ul>
                </form>
            </nav>



        </header>


        <div class="bott ">


            <div class="leftbody">

                <div class="displayPage-box">
                    <div class="displayPage">
                        <!--左侧商品导航 start-->



                        <!--左侧商品导航 end-->
                        <!--右侧商品列表 start-->

                        <div class="right col-12">
                            <div v-bind:class="{leftnav1:flagz==true,leftnav2:flagz!==true}" id="zuo" class="left-nav ">

                                <!--类别-->
                                <div class="type">

                                    <ul>
                                        <li><a href="#" style="font-weight: bold">鞋类</a></li>
                                        <li><a href="#">紧身运动服/Nike Pro</a></li>
                                        <li><a href="#">上衣/T恤</a></li>
                                        <li><a href="#">连帽衫/套头衫</a></li>
                                        <li><a href="#">夹克/马甲</a></li>
                                        <li><a href="#">长裤/紧身裤</a></li>
                                        <li><a href="#">短裤</a></li>
                                        <li><a href="#">连衣裤</a></li>
                                        <li><a href="#">袜子</a></li>
                                        <li><a href="#">配件/装备</a></li>
                                    </ul>

                                </div>

                                <!--筛选-->
                                <div class="filtrate ">
                                    <ul class="option-box" v-for="(item,index) in people">

                                        <li class="type-li"><a href="#">{{item.name}}</a>
                                            <span>
                                                <!-- 按钮 -->
                                                <div v-bind:class="{anniu1:butt[index]==true,anniu2:butt[index]==false}"
                                                    @click="shou(index)"></div>
                                            </span>
                                            <div v-show="flag"> </div>
                                            <ul class="option-ul"
                                                v-bind:class="{chuxian:butt[index]==true,xiaoshi:butt[index]==false}"
                                                v-for="item1 in item.limian">
                                                <li><a href="###"><input class="mycheck" type="checkbox" name=""
                                                            id="hide">
                                                        <label for="">{{item1}}</label></a>
                                                </li>

                                            </ul>
                                        </li>
                                        <div id="heihei"></div>

                                    </ul>

                                    <ul class="option-box" v-for="(item,index) in people">

                                        <li class="type-li"><a href="#">{{item.name}}</a>
                                            <span>
                                                <!-- 按钮 -->
                                                <div v-bind:class="{anniu1:butt[index]==true,anniu2:butt[index]==false}"
                                                    @click="shou(index)"></div>
                                            </span>
                                            <div v-show="flag"> </div>
                                            <ul class="option-ul"
                                                v-bind:class="{chuxian:butt[index]==true,xiaoshi:butt[index]==false}"
                                                v-for="item1 in item.limian">
                                                <li><a href="###"><input class="mycheck" type="checkbox" name=""
                                                            id="hide">
                                                        <label for="">{{item1}}</label></a>
                                                </li>

                                            </ul>
                                        </li>
                                        <div id="heihei"></div>

                                    </ul>
                                    <ul class="option-box">

                                        <li class="type-li"><a href="###">颜色</a><span></span>
                                            <div class="colorOption option-ul">
                                                <span style="background-color: rgb(255,255,255)"></span>
                                                <span style="background-color: rgb(229,229,229)"></span>
                                                <span style="background-color: rgb(235,225,190)"></span>
                                                <span style="background-color: rgb(254,213,51)"></span>
                                                <span style="background-color: rgb(218,175,0)"></span>
                                                <span style="background-color: rgb(243,107,38)"></span>
                                                <span style="background-color: rgb(123,186,60)"></span>
                                                <span style="background-color: rgb(23,144,200)"></span>
                                                <span style="background-color: rgb(216,42,144)"></span>
                                                <span style="background-color: rgb(127,127,0)"></span>
                                                <span style="background-color: rgb(231,53,53)"></span>
                                                <span style="background-color: rgb(141,66,159)"></span>
                                                <span style="background-color: rgb(119,120,120)"></span>
                                                <span style="background-color: rgb(130,93,65)"></span>
                                                <span style="background-color: rgb(17,17,17)"></span>
                                                <span style="background-color: rgb(251,244,217)"></span>
                                            </div>
                                        </li>

                                        <div id="heihei"></div>
                                    </ul>
                                </div>

                            </div>

                            <div v-bind:class="{kong1:flagz==true,kong2:flagz!==true}">

                            </div>
                            <div class="rightc  " id="right-commodity"
                                style=" display: flex; margin-left: 0px; margin-left: 0px;">

                                <div class="card mx-3 mb-1" v-bind:class="{xiao:flagz==true,da:flagz!==true}"
                                    v-for="(item,index) in xie" style="border-width: 0ch;"
                                    onclick="javascript:location.href='../商品详情页.html'" @mouseleave="myout(index)">

                                    <img v-bind:src="item.img" width=500px heigth=100px class="card-img-top"
                                        @mouseenter="myin(index)" alt="...">

                                    <div class="card-body">

                                        <div class="style1" v-show="showGroup[index]">
                                            <h5 class="card-title">{{item.name}}</h5>
                                            <p class="card-text">女子运动鞋</p>
                                            <p class="num-color">5 色</p>
                                        </div>

                                        <div v-show="!showGroup[index]" class="style2">
                                            <img @mouseenter="myin1(index)" @mouseleave="myout1(index)"
                                                src="https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/f38d01dd-2d09-44e5-8404-ee9ee56ccb27/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png"
                                                width=50px heigth=50px>
                                            <img @mouseenter="myin2(index)" @mouseleave="myout2(index)"
                                                src="https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/f38d01dd-2d09-44e5-8404-ee9ee56ccb27/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png"
                                                width=50px heigth=50px>
                                        </div>
                                        <div v-show="!showGroup[index]" class="style2" style="height: 17px;">

                                        </div>
                                        <h5 class="card-title">￥{{item.money}}</h5>

                                        <button v-bind:class="{btnxiao:flagz==true,btnda:flagz!==true}"
                                            @click="xin($event)">♡</button>

                                    </div>
                                </div>


                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="bott" style="display: block;margin-bottom: 0;bottom:0;background: #000;">
            <!-- 文字栏 -->
            <div>
                <ul class="list-group list-group-horizontal-sm" id="ds">
                    <ul id="card1" v-for="(item,index) in arr3">
                        <li class="card-text text-white pt-3" style="font-size:14px;font-weight: 400;">{{item.name}}
                        </li>
                        <li class="card-text text-white pt-3" style="font-size:14px;font-weight: 400;"
                            v-for="items in item.aa">{{items}}</li>
                    </ul>
                    <ul id="card2" v-for="(item,index) in arr4">
                        <li class="card-text text-white pt-3" style="font-size:14px;font-weight: 400;">{{item.name}}
                        </li>
                        <li class="card-text pt-3" style="font-size:12px;font-weight: 400;color: #7e7e7e;"
                            v-for="items in item.aa">{{items}}</li>
                    </ul>
                    <ul class="vechat mx-3">
                        <button class="rounded-circle" id="vechatT">
                            <svg class="social-link-icon" width="30px" fill="#111" height="30px" viewBox="0 0 24 24"
                                id="vechatT1">
                                <path
                                    d="M13.76 12a.612.612 0 0 0-.44.2c-.133.133-.2.267-.2.4s.067.267.2.4.293.2.48.2.36-.067.52-.2c.16-.133.24-.267.24-.4s-.08-.267-.24-.4a.848.848 0 0 0-.56-.2zm-2-2.88c.213 0 .4-.08.56-.24.16-.16.24-.347.24-.56a.645.645 0 0 0-.24-.52 1.062 1.062 0 0 0-.56-.24c-.213-.027-.413.04-.6.2s-.28.347-.28.56c0 .213.093.4.28.56.187.16.387.24.6.24zm-4.24-1.6c-.267 0-.493.08-.68.24-.187.16-.28.347-.28.56 0 .213.093.4.28.56.187.16.4.24.64.24s.427-.08.56-.24a.85.85 0 0 0 .2-.56.85.85 0 0 0-.2-.56.645.645 0 0 0-.52-.24zM12 0C9.813 0 7.8.533 5.96 1.6A11.793 11.793 0 0 0 1.6 5.96C.533 7.8 0 9.813 0 12s.533 4.2 1.6 6.04a11.793 11.793 0 0 0 4.36 4.36C7.8 23.467 9.813 24 12 24s4.2-.533 6.04-1.6a11.793 11.793 0 0 0 4.36-4.36C23.467 16.2 24 14.187 24 12s-.533-4.2-1.6-6.04a11.793 11.793 0 0 0-4.36-4.36C16.2.533 14.187 0 12 0zM9.52 15.36c-.427 0-1.013-.08-1.76-.24l-.4-.08-2.16 1.12.64-1.84c-1.653-1.173-2.48-2.56-2.48-4.16 0-1.44.6-2.667 1.8-3.68 1.2-1.013 2.653-1.52 4.36-1.52 1.493 0 2.827.413 4 1.24s1.893 1.853 2.16 3.08l-.64-.08c-1.44 0-2.667.48-3.68 1.44-1.013.96-1.52 2.107-1.52 3.44 0 .427.08.853.24 1.28h-.56zm8.96 2.16l.48 1.52-1.68-.96c-.8.213-1.413.32-1.84.32-1.44 0-2.667-.427-3.68-1.28-1.013-.853-1.52-1.893-1.52-3.12s.507-2.28 1.52-3.16c1.013-.88 2.227-1.32 3.64-1.32 1.413 0 2.64.44 3.68 1.32 1.04.88 1.56 1.947 1.56 3.2 0 1.253-.72 2.413-2.16 3.48zM17.12 12a.612.612 0 0 0-.44.2c-.133.133-.2.267-.2.4s.067.267.2.4.293.2.48.2.36-.067.52-.2c.16-.133.24-.267.24-.4s-.08-.267-.24-.4a.848.848 0 0 0-.56-.2z">
                                </path>
                            </svg>
                        </button>
                        <img class="social-link-image mb3-sm z3" id="weixin"
                            src="https://static.nike.com/a/images/w_960,c_limit/588c1078-1b99-40f6-86f2-3636daf5946d/image.png"
                            alt="WeChat QR Code" />
                    </ul>
                    <ul class="weibo">
                        <button class="rounded-circle" id="weiboT">
                            <svg class="social-link-icon" width="30px" fill="#111" height="30px" viewBox="0 0 24 24"
                                id="weiboT1">
                                <path
                                    d="M12 0C9.813 0 7.8.533 5.96 1.6A11.793 11.793 0 0 0 1.6 5.96C.533 7.8 0 9.813 0 12s.533 4.2 1.6 6.04a11.793 11.793 0 0 0 4.36 4.36C7.8 23.467 9.813 24 12 24s4.2-.533 6.04-1.6a11.793 11.793 0 0 0 4.36-4.36C23.467 16.2 24 14.187 24 12s-.533-4.2-1.6-6.04a11.793 11.793 0 0 0-4.36-4.36C16.2.533 14.187 0 12 0zm-1.6 18.56c-1.92 0-3.573-.4-4.96-1.2-1.547-.907-2.32-2.027-2.32-3.36 0-1.493.88-3.12 2.64-4.88 1.067-1.067 2.16-1.813 3.28-2.24 1.12-.427 1.893-.427 2.32 0 .427.427.507 1.12.24 2.08-.053.16 0 .24.16.24l.24-.08c.907-.373 1.707-.56 2.4-.56.693 0 1.187.2 1.48.6.293.4.28.973-.04 1.72-.053.16-.053.267 0 .32.053.053.16.107.32.16.587.16 1.08.44 1.48.84.4.4.6.893.6 1.48 0 .747-.333 1.507-1 2.28-.667.773-1.56 1.373-2.68 1.8-1.28.533-2.667.8-4.16.8zM16.64 8.4c-.267-.267-.613-.373-1.04-.32-.107.053-.227.04-.36-.04a.638.638 0 0 1-.28-.36.441.441 0 0 1 .08-.44.845.845 0 0 1 .4-.28 2.663 2.663 0 0 1 1.12.08c.373.107.693.307.96.6s.44.64.52 1.04c.08.4.067.787-.04 1.16a.638.638 0 0 1-.28.36.506.506 0 0 1-.44.04.607.607 0 0 1-.36-.32c-.08-.16-.093-.293-.04-.4.16-.427.08-.8-.24-1.12zm3.6 2.16a.771.771 0 0 1-.32.4.517.517 0 0 1-.52.04.762.762 0 0 1-.4-.36.607.607 0 0 1-.04-.48c.16-.533.187-1.093.08-1.68a2.945 2.945 0 0 0-.76-1.52 3.43 3.43 0 0 0-1.44-.92A2.658 2.658 0 0 0 15.2 6a1 1 0 0 1-.52-.12.648.648 0 0 1-.28-.4.6.6 0 0 1 .08-.52c.107-.16.24-.24.4-.24a3.957 3.957 0 0 1 2.36.08 4.79 4.79 0 0 1 2 1.32c.56.613.92 1.32 1.08 2.12.16.8.133 1.573-.08 2.32zm-10.48.16c-1.44.16-2.627.627-3.56 1.4-.933.773-1.36 1.627-1.28 2.56.08.933.653 1.68 1.72 2.24 1.067.56 2.32.773 3.76.64s2.627-.587 3.56-1.36c.933-.773 1.36-1.627 1.28-2.56-.08-.933-.653-1.68-1.72-2.24-1.067-.56-2.32-.76-3.76-.6v-.08zm2.48 4.48c-.267.64-.773 1.12-1.52 1.44-.747.32-1.467.36-2.16.12-.693-.24-1.173-.653-1.44-1.24-.267-.587-.253-1.187.04-1.8s.787-1.067 1.48-1.36c.693-.293 1.387-.347 2.08-.16.693.187 1.2.573 1.52 1.16.32.587.32 1.2 0 1.84zm-1.84-1.44c-.16-.107-.32-.053-.48.16-.053.053-.067.133-.04.24.027.107.093.16.2.16.213.107.373.053.48-.16.053-.107.067-.2.04-.28-.027-.08-.093-.12-.2-.12zm-1.04.4c-.213-.107-.453-.107-.72 0a1.211 1.211 0 0 0-.6.48.806.806 0 0 0-.12.64c.053.213.2.373.44.48.24.107.48.12.72.04.24-.08.427-.24.56-.48.133-.24.173-.467.12-.68a.716.716 0 0 0-.4-.48z">
                                </path>
                            </svg>
                        </button>
                    </ul>
                </ul>
            </div>
            <div class="dx1">
                <ul class="list-group list-group-horizontal" id="dx">
                    <li v-for="(item,index) in arr5">
                        <p class="text-secondary pl-5" style="font-size:10px;" href="#">&nbsp;{{item}}&nbsp;</p>

                    </li>
                    <p class="text-secondary pl-5" style="font-size:10px;" href="#">&nbsp; <img alt="上海工商"
                            class="d-sm-ib mr1-sm"
                            src="https://static.nike.com/a/images/w_960,c_limit/fdbd071f-7dfc-4efc-a30c-da2be519db74/image.png">
                        上海工商&nbsp;</p>
                </ul>
            </div>
        </div>

    </div>





    </div>
    </div>


    <script>


        let v1 = new Vue({
            el: '#app',
            data() {
                // people:{[
                //     name="zhangsan",
                //     id=1351312,
                //     phone=21122]}
                return {


                    flagdown:false,
                flagdown2:false,
                flagdown3:false,
                flagdown4:false,
                down1:1,
                help:['订单状态','配送','退换货','联系我们','隐私政策','销售条款','使用条款','向我们发送反馈'],
                zhanghu:['档案','订单','收藏','收件箱','体验','账户设置','退出'],
                arrdown:[
                    {
                        name:'潮流趋势',
                        aa:['街舞专属系列','上海时装周同款','基础百搭体恤','辣妹风','配件/装备',]
                    },
                    {
                        name:'新品上市',
                        aa:['本月所有新品','男子新品','女子新品','儿童新品','JORDAN新品',]
                    },
                    {
                        name:'尖货专区',
                        aa:['NIKE APP专属尖货','SNKRS新品上市','耐看读物',]
                    },
                ],
                arrdown1:[
                    {
                        name:'鞋类',
                        aa:['所有鞋类','跑步','篮球','休闲','足球','拖鞋','运动/健身','滑板','网球',]
                    },
                    {
                        name:'服装',
                        aa:['所有服装','T恤','短裤','球衣','连帽衫/卫衣','运动裤/休闲裤','外套/夹克',]
                    },
                    {
                        name:'运动集结',
                        aa:['NBA','跑步','滑板','瑜伽','网球','折扣优惠','会员限定',]
                    },
                ],
                arrdown2:[
                    {
                        name:'鞋类',
                        aa:['所有鞋类','婴童(11CM-16CM)','幼童(17CM-22CM)','大童(35.5-40欧码)',]
                    },
                    {
                        name:'服装',
                        aa:['所有服装','婴童(85-104CM)','幼童(96-122CM)','大童(122-170CM)',]
                    },
                    {
                        name:'配件',
                        aa:['包','袜子','帽子和头带','太阳镜']
                    },
                ],

                    liebiao: [],
                    imgArr: ["QQ图片20220704192157.png", "222.png"],
                    indexx: [] = [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    imgxArr: ["https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/62e4cc3c-e3ba-4564-8672-d969cbdc4567/air-rift-br-%E5%A5%B3%E5%AD%90%E9%80%8F%E6%B0%94%E7%BC%93%E9%9C%87%E5%88%86%E8%B6%BE%E8%BF%90%E5%8A%A8%E9%9E%8B-xHhNmZ.png",
                        "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/f38d01dd-2d09-44e5-8404-ee9ee56ccb27/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png",
                        "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5,q_80/09b2aa74-7b88-467f-be8d-6762d62063ac/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png",
                        "https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/ff1c2041-6df3-4a4d-b3c2-c9ffd73c030e/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png",


                    ],
                    showGroup: [],
                    people: [],
                    xie: [],
                    pageNum: 5,
                    toPage: 1,
                    newPeople: {},
                    editPeople: {},
                    indexxnum: 0,
                    dalei: ["产品类型", "性别", "按价格选购", "品牌", "尺码", "鞋类"],
                    lei1: ["鞋类"],
                    lei2: ["男子", "女子"],
                    lei3: ["0-299", "299-599", "599-799"],
                    lei4: ["Nike", "Jordan", "ACG"],
                    lei5: ["36", "37.5", "38.5", "40", "41", "42.5", "44"],
                    lei6: ["凉鞋", "拖鞋"],

                    paixuzhi: " ",
                    flag: true,

                    flagz: false,
                    textz: "显示筛选条件",
                    butt: [],
                    imgzancun: null,

                    arr3: [
                        {
                            name: '电子礼品卡',
                            aa: ['企业团购', '附近商店', '订阅电子邮件', '注册NIKE会员', '向我们发送反馈']
                        },
                    ],
                    arr4: [{
                        name: '获得帮助',
                        aa: ['订单状态', '配送方式', '退换货', '付款选项', '联系我们']
                    },
                    {
                        name: '关于NIKE',
                        aa: ['新闻', '投资者', '招贤纳士', '新品预览']
                    },],
                    arr5: ['分类浏览', '使用条款', '销售条款', '隐私政策', '沪ICP备14009339号'],

                };

            },
            computed: {
                total: {
                    get: function () {

                        var page = Math.ceil(this.people.length / this.pageNum);

                        return page;
                    }
                }
            },
            methods: {
                test: function (e) {

                   
                   

                    let str = e.path[0].innerText;

                    console.log(str.charCodeAt());
                    if (str.charCodeAt() == 171) {
                        if (this.toPage > 1)
                            this.toPage--;
                    } else if (str.charCodeAt() == 187) {
                        if (this.toPage < this.total) {
                            this.toPage++;
                        }
                    } else {
                        this.toPage = Number(str);
                    }

                    let username = Mock.Random.cname();
                    let userid = Mock.Random.id();
                    let userphone = Mock.Random.string('number', 11);
                 

                },
                deletee: function (index) {
                    let delnum = (this.toPage - 1) * this.pageNum + index;
                    this.people.splice(delnum, 1);
                },
                shou: function (index) {

                    this.flag = !this.flag;
                    console.log(index)
                    this.butt[index] = !this.butt[index];
                    console.log(this.butt[index])

                }, paixu: function (index) {
                    console.log(index);
                    console.log(index.target.innerText);
                    this.paixuzhi = index.target.innerText;
                }, ceshi: function (index) {
                    console.log(index);
                }, yincangz: function (index) {
                    console.log();
                    this.flagz = !this.flagz;
                    if (this.flagz) this.textz = "隐藏筛选条件";
                    else this.textz = "显示筛选条件";
                }, xin: function (event) {
                    console.log(event.srcElement.innerText);
                    if (event.srcElement.innerText == "♡")
                        event.srcElement.innerText = "♥";
                    else {
                        event.srcElement.innerText = "♡";
                    }
                }, myin: function (index) {


                    this.$set(this.showGroup, index, false);
                    // this.showGroup[index]=!this.showGroup[index]

                }, myout: function (index) {


                    this.$set(this.showGroup, index, true);

                }, myin1: function (index) {
                    console.log("in")
                    this.imgzancun = this.xie[index].img;
                    var a = this.xie[index];
                    a.img = "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/f38d01dd-2d09-44e5-8404-ee9ee56ccb27/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png";
                    this.$set(this.xie, index, a);
                }, myout1: function (index) {
                    console.log("out")
                    var a = this.xie[index];
                    a.img = this.imgzancun;
                    this.$set(this.xie, index, a);
                  
                }
                , myin2: function (index) {
                    console.log("in")
                    this.imgzancun = this.xie[index].img;
                    var a = this.xie[index];
                    a.img = "https://static.nike.com.cn/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/f38d01dd-2d09-44e5-8404-ee9ee56ccb27/tc-7900-prm-2-%E5%A5%B3%E5%AD%90%E8%BF%90%E5%8A%A8%E9%9E%8B-qvrBnm.png";
                    this.$set(this.xie, index, a);
                }, myout2: function (index) {
                    console.log("out")
                    var a = this.xie[index];
                    a.img = this.imgzancun;
                    this.$set(this.xie, index, a);
                 
                },
                  show(){             //显示与隐藏
                    this.flagdown = !this.flagdown;
                },
                hid(){             //显示与隐藏
                    this.flagdown = !this.flagdown;
                },
                show2(){             //显示与隐藏
                    this.flagdown2 = !this.flagdown2;
                },
                hid2(){             //显示与隐藏
                    this.flagdown2 = !this.flagdown2;
                },
                show3(){             //显示与隐藏
                    this.flagdown3 = !this.flagdown3;
                },
                hid3(){             //显示与隐藏
                    this.flagdown3 = !this.flagdown3;
                },
                show4(){             //显示与隐藏
                    this.flagdown4 = !this.flagdown4;
                },
                hid4(){             //显示与隐藏
                    this.flagdown4 = !this.flagdown4;
                },


            },
            mounted() {

                console.log("moun");
                let userArr = []; //yong hu xin xi
                let xieArr = [];
                //lin shi dui xiang;
                leii = [this.lei1, this.lei2, this.lei3, this.lei4, this.lei5, this.lei6];
                for (let i = 0; i < 6; i++) {
                    let userInfo = {};
                    userInfo.name = this.dalei[i];
                    userInfo.limian = leii[i]
                    userArr.push(userInfo);
                }
                for (let i = 0; i < 13; i++) {
                    let userInfo = {};
                    let userInfoxie = {};
                    userInfo.name = Mock.Random.cname();

                    // userInfo.id = Mock.Random.id();
                    userInfo.phone = Mock.Random.string('number', 11);

                    userInfo.limian = [Mock.Random.id(), Mock.Random.id(), Mock.Random.id()];

                    userInfoxie.name = Mock.Random.name();
                    userInfoxie.money = Mock.Random.string('number', 3);
                    var a = 4
                    a = Mock.Random.integer(0, 3)
                    userInfoxie.img = this.imgxArr[a];
                    this.showGroup[i] = true;
                    // userArr.push(userInfo);
                    xieArr.push(userInfoxie);
                    this.butt[i] = true;

                }

                this.people = userArr;
                this.xie = xieArr;

                console.log(this.people[1].limian)

            },
        });
    </script>



    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="./scripts/libs.js"></script>
    <script src="./scripts/display.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>


<style>
    .displayPage-box .displayPage .left-nav .filtrate {
        /* 不可以移动 */
        margin: 250px auto;
    }




    .navbar-expand .navbar-nav .dropdown-menu {
        transform: translate(0, 10%);
    }


    #right-commodity {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* position: absolute; */
        width: auto;
        margin-left: 0px;

        /* 不可以移动 */
    }



    .displayPage-box .displayPage .left-nav {


        overflow-x: hidden;
        /* bottom: -200px; */
        margin-bottom: 20px;
        padding-bottom: 20px;
        height:450px;
        width: 300px;
        /* 不可以移动 */

    }

    .displayPage-box {
        /* 不可以移动 */
        margin-top: 270px;
        /* transform: translate(0, -120%); */
    }
</style>

</html>